<template>
  <div class="count">
    <div class="countTop">行为决策实验平台</div>
    <div class="countMain">
      <div class="mainPic">
        <img src="@/assets/countdown.png" alt="" />
        <div class="mainTime">请您耐心等待{{ time }}s...</div>
      </div>

    </div>
  </div>
</template>

<script>
import {postStartTime} from '@/api/index'
export default {
  // eslint-disable-next-line
  name: 'Countdown',
  data() {
    return {
      time: 0,
      IntervalId:0
    }
  },
  mounted() {
    let THIS = this
    THIS.time = 6
   this.IntervalId = setInterval(THIS.countDown, 1000)
  },
  watch: {
    // eslint-disable-next-line
    time: function (newVal, oldVal) {
      if (newVal == 0) {
        clearInterval(this.IntervalId)
        // this.$router.push({ name: 'TaskOne' })
        this.postStartTimes()
      }
    }
  },
  methods: {

    postStartTimes(){
      var startTime = Date.now()
      console.log("开始时间"+startTime)
      var seatID = this.$store.state.seatID
      console.log("座位号"+ this.$store.state.seatID)
      postStartTime({seatID,startTime}).then(res=>{   //提交开始测试时间
        console.log("提交开始测试时间结果"+res)
        if(res.isValid==true)
        {
          this.$router.push({ name: 'TaskOne' })
        }
        else {
          this.$message.error('桌号不存在，请重新登录!')
        }
      })
    },
    countDown() {
      let THIS = this
      THIS.time--
    }
  }
}
</script>

<style lang="scss" scoped>
.count {
  height: 100%;
  width: 100%;

  .countTop {
    height: 10%;
    font-size: 58px;
    letter-spacing: 10px;
    font-weight: 700;
    color: aliceblue;
    background-color: #0b45b0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .countMain {
    //height: 90%;
    padding-top: 5rem;
    .mainPic {
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
    }


  }
  .mainTime {
    //padding: 1em;
    //width: 100%;
    position: absolute;
    display: flex;
    //justify-content: center;
    align-items: center;
    bottom: 10%;
    font-size: 38px;
  }
}
</style>